<template>
  <el-menu :default-active="$route.path"
           class="el-menu-vertical-demo menu"
           router
           background-color="#545c64"
           text-color="#fff"
           active-text-color="#ffd04b">
    <template v-for="menu in menus">
      <el-menu-item :index="menu.route"
                    :key="menu.route"
                    v-if="!menu.children"
                    @click="handleOpen(menu)">
        <i class="el-icon-menu"></i>{{menu.name}}
      </el-menu-item>
      <el-submenu :index="menu.route"
                  :key="menu.route"
                  v-if="menu.children">
        <template slot="title"><i class="el-icon-menu"></i>{{menu.name}}</template>
        <el-menu-item v-for="item in menu.children"
                      :index="item.route"
                      :key="item.route"
                      @click="handleOpen(item)">
          <i class="el-icon-location"></i>{{item.name}}
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'NavCom',
  props: {
    menus: Array
  },
  data () {
    return {}
  },
  methods: {
    // vuex辅助函数
    ...mapActions({
      handleOpen: 'editableTabs'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.menu {
  background: $bgColor;
  font-size: $fontSize;
  color: #fff;
  active-text-color: #ffd04b;
}
</style>
